<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="../jquery-3.3.1.min.js"></script>
    <style>
        #box{
            width: 400px;
            height: 400px;
            border: 2px solid skyblue;
        }
    </style>
</head>
<body>
    <h1>jQueryDOM 与 JSDOM的区别 以及相互转化</h1>

    <hr>
    <div id="box"></div>

    <img src="../1.jpg" width="50" id="myimg">

    <script>
        
        var box = document.getElementById('box');//JSDOM

        var $box = $('#box');//jQueryDOM

        console.dir(box);
        // console.dir($box);


        //改变box css样式
        
        box.style.backgroundColor = 'red';

        $box.css('background-color','skyblue');

        myimg.width = 600;

        $('#myimg').attr('width',300);

        //转化 JSDOM -> jQueryDOM
        
        $(box).css('background-color', 'yellow');

        //转化 jQuery -> JSDOM
        
        $box[0].style.backgroundColor = 'blue';
        // jQuery -> JSDOM方法2
        $box.get(0).style.backgroundColor = 'green';

        //命名冲突问题
        
        var $ = '静静';
        //出不来 因为冲突
        // $('h1').css('color','red');
        jQuery('h1').css('color','red')
    </script>
</body>
</html>